import React, { useState }from 'react';
import { Typography } from 'antd';
import { CalculatorOutlined } from '@ant-design/icons';
import TopMenu from '../components/layout/TopMenu';
import Demo from './subpages/Demo';
import Demo2 from './subpages/Demo2';


const { Title } = Typography;

const DemoPage: React.FC = () => {
  const [currentMenuKey, setCurrentMenuKey] = useState('demo1');

  // 顶部菜单配置
  const topMenuItems = [
    { 
      key: 'demo1',
      label: '演示功能1',
    },
    {
      key: 'demo2',
      label: '演示功能2（动态输入计算）',
    },
  ];

  // 注意：根据要求，这里不引入TestAlgorithms，也不引入testService
  // 如有需要，可通过IPC通信调用后端服务

  const handleMenuClick = (key: string) => {
    setCurrentMenuKey(key);
  };


  return (
    <div>
      <Title level={2}>
        <CalculatorOutlined /> 演示功能
      </Title>
      
      <div style={{ marginBottom: '24px', overflow: 'hidden' }}>
        <TopMenu 
          currentKey={currentMenuKey}
          onChange={handleMenuClick}
          items={topMenuItems}
        />
      </div>

      {currentMenuKey === 'demo1' && (
        <Demo />
      )}
      
      {currentMenuKey === 'demo2' && (
        <Demo2 />
      )}



    </div>
  );
};

export default DemoPage;